<template>
	<view class="xilu">
		<view class="page-foot bg-normal plr25">
			<view @click.stop="lessonSign(1)"  class="btn1 mb30">去兑换</view>
		</view>
		<view class="container">
			<swiper class="xilu_swiper_info" @change="swiperTab" :current="current" :circular="true"
				:autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(vo,index) in [info.xilufitness_urls.image]">
					<image :src="vo" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="pr mt_132 z5 plr25 pb30">
				<view class="pro-card">
				  <view class="pro-header">
				    <text class="pro-title">{{info.title}}</text>
					<view class="pro-price" style="display: flex;">
					  <text class="price-label">￥</text>
					  <text class="price-val">{{info.price}}</text>
					</view>
				    <view class="pro-stock-badge">库存：{{ info.stock }}</view>
				  </view>
				  <view class="pro-body">
				<!--    <view class="pro-points">
				      <text class="points-label">积分</text>
				      <text class="points-val">{{info.point}}</text>
				    </view> -->
				  
				  </view>
				</view>
				<view class="xilu_box" >
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">商品详情</view>
					<view style="color: #333;">
						<mp-html :content="info.content"></mp-html>
					</view>
				</view>

			</view>
		</view>
		<u-authorize @onAuthCancel="onAuthCancel($event)" @onAuthConfirm="onAuthConfirm($event)"
			:popupStatus="auth_status" :isAuth="2"></u-authorize>
	</view>
</template>

<script>
	const app = getApp();
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				current: 0,
				swiperList: ['', '', '', '', '', '', ''],
				info: null,
				course_type: 1,
				coach_info: null,
				thumb_images: [],
				content: [],
				tip_content: [],
				sign_list: [],
				comment_list: [],
				auth_status: false,
				web_url: '',
				distance: null
			}
		},
		methods: {
			swiperTab(e) {
				this.current = Number(e.target.current)
				console.log(this.current);
			},
			//课程详情
			detail(id) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/market_wares/detail',
					data: {
						id: id
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						console.log(res);
						_this.info = res.data.info || '';
						_this.thumb_images = res.data.info.course.xilufitness_urls.thumb_images || [];
						_this.coach_info = res.data.info.coach;
						_this.sign_list = res.data.userList || [];
						_this.getComments((res.data.info.course_id || 0), (res.data.info.course_type || 1));
						this.distance = (_this.info.shop.distance / 1000).toFixed(1) + 'km'

					}
				}).catch(error => {
					console.log('courseDetailError', error);
				})
			},
			//打开地图
			openLocation(lat, lng) {
				this.$api.openLocation(lat, lng);
			},
			//去预约
			lessonSign(id) {
				
					this.$api.navigate('../../points_buy/points_buy?id=' + this.info.id )
				
			},
			//授权取消
			onAuthCancel(e) {
				this.auth_status = false;
				this.$api.toast('取消授权，可能会使部分服务不能用，或页面信息不完整')
			},
			//授权成功
			onAuthConfirm(e) {
				this.auth_status = false;
			},
			//邀请有礼
			user_invite() {
				let token = this.$api.getCache('token');
				if (!token) {
					this.auth_status = true;
				} else {
					this.$api.navigate('../invite/invite');
				}
			},
			//教练详情
			redirect_coach_info(id, shop_id) {
				this.$api.navigate('../trainer_info/trainer_info?id=' + id + '&shop_id=' + shop_id);
			},
			//更多评论
			commentList(course_camp_id, course_type) {
				this.$api.navigate('../user_appraise_list/user_appraise_list?course_camp_id=' + course_camp_id +
					'&course_type=' + course_type);
			},
			//获取评论
			getComments(course_camp_id, course_type) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/course/getCommentList',
					data: {
						id: course_camp_id,
						course_type: course_type
					}
				}).then(res => {
					if (res.code == 1) {
						_this.comment_list = res.data.list || [];
					}
				});
			}

		},
		onLoad(options) {
			this.web_url = webConfig.base_url || '';
			this.course_type = options.is_type || 1;
			this.detail(options.id || 0);
		},
		onShareAppMessage() {

		}
	}
</script>

<style lang="scss" scoped>
	.pro-card {
	  background: linear-gradient(135deg, #fff 80%, #fff 100%);
	  border-radius: 32rpx;
	  box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.16);
	  padding: 40rpx 40rpx;
	  margin: 32rpx auto;
	  width: 670rpx;
	  box-sizing: border-box;
	  position: relative;
	}
	
	.pro-header {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: flex-start;
	}
	
	.pro-title {
	  font-size: 40rpx;
	  font-weight: 600;
	  color: #333;
	  letter-spacing: 2rpx;
	}
	
	.pro-stock-badge {
	  background: rgba(255,255,255,0.08);
	  color: #ffc94d;
	  font-size: 26rpx;
	  padding: 8rpx 22rpx;
	  border-radius: 24rpx;
	  font-weight: 500;
	}
	
	.pro-body {
	  display: flex;
	  flex-direction: row;
	  align-items: flex-end;
	  justify-content: flex-start;
	  gap: 48rpx;
	}
	
	.pro-points, .pro-price {
	  display: flex;
	}
	
	.points-label {
	  font-size: 26rpx;
	  color: #ffd600;
	  opacity: 0.76;
	  font-weight: 500;
	  margin-bottom: 8rpx;
	  letter-spacing: 2rpx;
	}
	.points-val {
	  font-size: 44rpx;
	  font-weight: 700;
	  color: #ffd600;
	  text-shadow: 0 4rpx 12rpx rgba(255,214,0,0.14);
	}
	
	.price-label {
	  font-size: 26rpx;
	  color: #ff4343;
	  opacity: 0.68;
	  margin-bottom: 2rpx;
	}
	.price-val {
	  font-size: 44rpx;
	  font-weight: 700;
	  color: #ff4343;
	  text-shadow: 0 4rpx 12rpx rgba(255,67,67,0.13);
	}
	.group_name {
		display: inline-block;
		    height: 39rpx;
		    line-height: 39rpx;
		    background: linear-gradient(90deg, #FFD26A 0%, #FFB94E 100%);
		    border-radius: 19rpx;
		    padding: 0 15rpx;
		    font-size: 24rpx;
		    font-weight: 400;
		    color: #000000;
		    margin-left: 20rpx;
	}
	.xilu {
		&_swiper_info {
			width: 100%;
			height: 750rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		&_mask {
			width: 100%;
			height: 380rpx;
			position: absolute;
			bottom: 0;
			z-index: 3;
			left: 0;
		}

		&_swiper_dot {
			display: inline-block;
			height: 39rpx;
			line-height: 39rpx;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 20rpx;
			position: absolute;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			right: 30rpx;
			bottom: 194rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			z-index: 4;
		}

		&_lession_info {
			width: 700rpx;
			height: 220rpx;
			z-index: 1;

			&_bg {
				width: 700rpx;
				height: 220rpx;
				position: relative;
				z-index: 1;
			}

			&_view {
				width: 700rpx;
				height: 220rpx;
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
			}
		}

		&_box {
			background: #fff;
			border-radius: 20rpx;
			width: 100%;
			margin-top: 30rpx;
			padding: 30rpx;
		}

		&_head_big {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
		}

		&_mini_head {
			width: 90rpx;
			height: 90rpx;
			border: 2rpx solid #FFFFFF;
			position: relative;
			margin-top: 30rpx;
			margin-left: -12rpx;
			display: inline-block;
			vertical-align: top;
			border-radius: 50%;

			&:first-child,
			&:nth-of-type(9n) {
				margin-left: 0;
			}
		}

		&_btn_more {
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			width: 146rpx;
			height: 55rpx;
			line-height: calc(55rpx - 2px);
			text-align: center;
			border-radius: 28rpx;
			border: 1px solid #979797;
		}

		&_pj_item {

			border-top: 1px solid #434343;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			&_head_img {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			&_star {
				width: 23rpx;
				height: 21rpx;
			}
		}
	}

	.mt_132 {
	}

	.z5 {
		z-index: 5;
	}

	.bb {
		border-bottom: 1px solid #434343;
	}
	
	
	.product-swiper {
		width: 100%;
		height: 750rpx;
		background: #fff;
	
		image {
			width: 100%;
			height: 100%;
			// border-radius: 0 0 32rpx 32rpx;
		}
	}
	
	.product-info {
		padding: 30rpx;
		background: #fff;
	
		.product-title {
			font-size: 36rpx;
			color: #333;
			font-weight: 600;
			line-height: 1.4;
			margin-bottom: 24rpx;
		}
	
		.product-description {
			color: #6bc90e;
			font-size: 28rpx;
			line-height: 1.6;
		}
	}
	
	.product-price {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.price {
			
	
			.current-price {
				color: #e4393c;
				font-size: 40rpx;
				font-weight: 700;
				margin-right: 16rpx;
			}
	
			.original-price {
				color: #999;
				font-size: 28rpx;
				text-decoration: line-through;
			}
		}
	
		>view {
			color: #666;
			font-size: 28rpx;
		}
	}
	
	.pin-price {
		padding: 0 30rpx 10rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.price {
			display: flex;
			align-items: baseline;
	
			.current-price {
				color: #e4393c;
				font-size: 36rpx;
				font-weight: 700;
				margin-right: 16rpx;
			}
		}
	}
	
	.group {
		padding: 20rpx;
		width: calc(95% - 40rpx);
		margin: auto;
		background-color: #e02e24;
		color: #fff;
		border-radius: 20rpx;
	
		.title {
			font-size: 40rpx;
			font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	
			text {
				margin-left: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	
		.content {
			.pin_list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx;
				border-bottom: 1rpx solid #dfdfdf;
			}
	
			background-color: #fff;
			border-radius: 20rpx;
			color: #333;
			padding: 10rpx 20rpx;
	
			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 40%;
	
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
	
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
					}
				}
	
				.username {
					// width: 200rpx;
					// text-align: left;
					margin-left: 50rpx;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}
			}
	
			.btn {
				width: 200rpx;
	
				button {
					background-color: #e02e24;
					color: #fff;
					border-radius: 20rpx;
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	
	// .special-price-tag {
	//   position: absolute;
	//   top: 690rpx;
	//   right: 40rpx;
	//   background: linear-gradient(45deg, #FF6B6B, #FF8787);
	//   color: #fff;
	//   padding: 8rpx 24rpx;
	//   border-radius: 40rpx;
	//   font-size: 24rpx;
	//   box-shadow: 0 4rpx 12rpx rgba(255,107,107,0.2);
	// }
	
	.product-details {
		padding: 30rpx;
		background: #fff;
		border-radius: 24rpx;
	
		.details-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 32rpx;
			position: relative;
			padding-left: 24rpx;
	
			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: #00c40a;
				border-radius: 4rpx;
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 32rpx;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.06);
		background-color: #fff;
	
		.button {
			display: flex;
			flex-direction: row;
			gap: 20rpx;
		}
	
		.u-button {
			height: 88rpx !important;
			border-radius: 44rpx !important;
			background: linear-gradient(90deg, #00c40a, #6bc90e) !important;
			font-size: 32rpx !important;
			transition: opacity 0.2s;
	
			&:active {
				opacity: 0.9;
			}
		}
	}
	
	.pad-20 {
		padding: 20rpx;
	
		.info {
			margin: 20rpx 0;
		}
	}
	
	.card_item {
		background-color: #fff;
		// margin-top: 40rpx;
		// padding: 20rpx;
		border-radius: 20rpx;
	
		.Delivery_type {
			display: flex;
			position: relative;
			overflow: hidden;
			border-radius: 20rpx 20rpx 0 0;
	
			.tab-item {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #e0e8d3;
				color: #97a384;
				transition: all 0.3s;
	
				&.active {
					font-weight: bold;
					color: #000;
					background: #fff;
					box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	
					&:first-child::after {
						content: "";
						position: absolute;
						top: 0;
						right: -20rpx;
						width: 0;
						height: 0;
						border-top: 40rpx solid transparent;
						border-bottom: 40rpx solid transparent;
						border-left: 20rpx solid #fff;
						z-index: -1;
					}
	
					&:last-child::before {
						content: "";
						position: absolute;
						top: 0;
						left: -20rpx;
						width: 0;
						height: 0;
						border-top: 40rpx solid transparent;
						border-bottom: 40rpx solid transparent;
						border-right: 20rpx solid #fff;
						z-index: -1;
					}
				}
			}
		}
	
		.address_select {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 20rpx;
	
			.title {
				color: #999999;
			}
		}
	
		.address_select_me {
			padding: 40rpx 20rpx;
	
			.address_select_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
	
				.title {}
			}
	
			.bor {
				border-bottom: 1rpx solid #dfdfdf;
			}
		}
	}
	
	.list_item_group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #dfdfdf;
	
		.item_title {
			display: flex;
			gap: 10rpx;
			font-size: 32rpx;
			font-weight: bold;
	
			.product-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
			}
		}
	
		.item_content {
			width: 70%;
	
			span {
				color: #f5333b;
				font-size: 36rpx;
			}
		}
	}
	
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	
		.img {
			width: 200rpx;
			height: 200rpx;
	
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	
		.info {
			width: calc(90% - 200rpx);
			display: flex;
			flex-direction: column;
	
			gap: 10rpx;
		}
	
		.price {
			color: #e02e24;
			font-size: 36rpx;
			padding: 10rpx;
		}
	}
	
	.payment-card {
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		// margin-bottom: 120rpx;
	}
	
	.list_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.u-popup {
		.popup_title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			padding: 30rpx 0;
		}
	
		.time-list {
			display: flex;
			background-color: #fff;
			border-radius: 20rpx;
	
			.date-section {
				display: flex;
				background-color: #f5f5f5;
				padding: 20rpx;
				width: 30%;
	
				.date-item {
					padding: 20rpx 40rpx;
					font-size: 30rpx;
					color: #666;
					display: inline-block;
					text-align: center;
	
					&.active {
						color: #07c160;
						font-weight: bold;
						border-bottom: 4rpx solid #07c160;
					}
	
					.date {
						display: block;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
	
			.time-section {
				width: 70%;
				padding: 20rpx;
	
				.time-slot {
					padding: 40rpx 0;
					font-size: 34rpx;
					color: #333;
	
					&.active {
						color: #07c160;
						font-weight: bold;
						animation: bounceIn 0.3s;
	
						@keyframes bounceIn {
							0% {
								transform: scale(1);
							}
	
							50% {
								transform: scale(1.05);
							}
	
							100% {
								transform: scale(1);
							}
						}
					}
				}
			}
		}
	}
	
	// .payment-item {
	//   margin-bottom: 40rpx; /* 可根据需要调整间距 */
	// }
	.spec-quantity {
		// margin-top: 20rpx;
		padding: 0 20rpx;
	}
	
	.spec-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
	}
	
	.spec-scroll {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.spec-item {
		padding: 10rpx 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 8rpx;
		font-size: 24rpx;
	}
	
	.spec-item.active {
		border-color: #6bc90e;
		color: #6bc90e;
	}
	
	.confirm-btn {
		background-color: #5ac725;
		color: #fff;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 40rpx;
		font-size: 32rpx;
	
		// 增加点击反馈
		&:active {
			opacity: 0.8;
		}
	}
	
	.buy-dialog {
		padding: 40rpx 30rpx;
	}
	
	.buy-dialog-info {
		display: flex;
	}
	
	.buy-dialog-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}
	
	.buy-dialog-meta {
		flex: 1;
	}
	
	.buy-dialog-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.buy-dialog-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	
	.buy-dialog-price {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.current-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #6bc90e;
		margin-right: 10rpx;
	}
	
	.original-price {
		font-size: 26rpx;
		color: #999;
		text-decoration: line-through;
	}
	
	.spec-quantity {
		margin-top: 20rpx;
	}
	
	.spec-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.spec-scroll {
		display: flex;
		flex-wrap: wrap;
	}
	
	.spec-item {
		padding: 10rpx 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #666;
	}
	
	.spec-item.active {
		border-color: #6bc90e;
		color: #6bc90e;
	}
	
	.buy-dialog-btns {
		margin-top: 40rpx;
	}
</style>